<template>
  <Card
    :eventDetailList="eventDetailList"
    style="height:700px;width:100%;min-height:660px;background:#01237C;"
  >
    <p slot="title" style="padding-left:30px;">
      <!-- <Icon type="ios-film-outline"></Icon> -->
      事件详情
    </p>
    <ul style="text-align:left; padding:10px 0px; list-style:none;">
      <li v-for="item in eventDetailList" :key="item.index">
        <p
          style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
        >
          事件站点：{{ item.station }}
        </p>
        <p
          style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
        >
          事件区域：{{ item.category }}
        </p>
        <p
          style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
        >
          事件名称：{{ item.action }}
        </p>
        <p
          style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
        >
          事件原因：{{ item.cause }}
        </p>
        <p
          style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
        >
          事件等级：{{ item.level }}
        </p>
        <p
          style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
        >
          发生时间：{{ item.datetime }}
        </p>
        <p
          style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
        >
          事件照片：
          <img
            :src="item.http_url_image"
            style="width:100%;padding:10px 10px;"
          />
        </p>
        <p
          style="line-height:16px;font-size:16px;color:#fff;padding:10px 10px;"
        >
          事件视频：
          <Button
            v-if="item.http_url_video !== '' && item.http_url_video !== 'null'"
            @click="clickDetailEventVideo"
            size="small"
            type="warning"
          >
            查看视频
          </Button>
          <span v-else>无视频</span>
          <Modal
            v-model="item.videoModal"
            :title="
              item.station +
                ' - ' +
                item.action +
                ' - ' +
                item.level +
                ' - ' +
                item.datetime
            "
            width="1080"
            class-name="vertical-center-modal"
            footer-hide
          >
            <div style="height: 100%;padding: 10px 10px;">
              <MyVideoMp4 :src="item.http_url_video"></MyVideoMp4>
            </div>
          </Modal>
        </p>
      </li>
    </ul>
  </Card>
</template>

<script>
// 视频
import MyVideoMp4 from "@/components/myvideo/MyVideoMp4";

export default {
  name: "myDetail",
  components: {
    MyVideoMp4
  },
  props: {
    eventDetailList: {
      type: Array
    }
  },
  computed: {
    item: function() {
      return this.eventDetailList[0];
    }
  },
  methods: {
    clickDetailEventVideo: function() {
      this.$emit("handleDetailEventVideo", this.item);
    }
  }
};
</script>

<style></style>
